<template lang="pug">
	.field-item-wrap
		.field-line-box(:class="{'field-line-box-border':showBorder}")
			.left-action
				img(:src="img" v-if="img")
				.field-item-name {{text}}
				.field-item-option(:style="{color:optionColor}") {{option}}
			.right-action
				.hint(:style="{color:color}") {{hint}}
				i.arrow-right(v-if="showArrow")
</template>
<script>
export default {
	data() {
		return {}
	},
	props: {
		img: {
			type: String,
			default: ''
		},
		text: {
			type: String,
			default: ''
		},
		option: {
			type: String,
			default: ''
		},
		optionColor: {
			type: String,
			default: '#888888'
		},
		hint: {
			type: String,
			default: ''
		},
		showArrow: {
			type: Boolean,
			default: false
		},
		showBorder: {
			type: Boolean,
			default: true
		},
		color: {
			type: String,
			default: '#888888'
		}
	},
	computed: {},
	mounted() {},
	onPullDownRefresh() {},
	onReachBottom() {},
	methods: {},
	components: {}
}
</script>

<style lang="stylus">
	.field-item-wrap
		background-color white
		.field-line-box-border
			border-bottom borderStyle
		.field-line-box
			height 100px
			display flex
			justify-content space-between
			margin-left mainPadding
			padding-right mainPadding
			.left-action
				display flex
				justify-content flex-start
				align-items center
				.field-item-name,.field-item-option
					font-size 30px
				.field-item-option
					padding-left 30px
				img
					margin-right 16px
					width 48px
					height 48px
			.right-action
				display flex
				justify-content flex-end
				align-items center
				.hint
					color grayFontColor88
					font-size 30px
				.arrow-right
					margin-left 6px
					width 16px
					height 24px
					centerBackground("../assets/image/common/arrow_right_grey.png")
</style>
